<template>
  <div class="blogger_">
      <div class="blogger_lift">
        <div class="user_reply">
          <div class="rep_input">
            留言板
          </div>
          <div class="textarea_">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="145"
              rows=4
              show-word-limit
              resize='none'
            >
            </el-input>

            <el-button 
              type="primary"
              round
              class="butt_area"
              @click="submitMessage">
              发表
            </el-button>

          </div>
        </div>
        <div class="ly_title">精选留言</div>
        <div class="block">
          <el-timeline>
            <el-timeline-item 
              v-for="reply in contrdata" 
              :key="reply.id"
              :timestamp="reply.created_at" 
              placement="top"
              >
              <el-card>
                <div class="reply_user">
                  <div class="reply_title">
                    <span class="el-icon-s-custom"></span>
                    {{reply.user_name}}
                  </div>
                  <div class="reply_content">
                    {{reply.content}}
                  </div>
                </div>
                <div class="admin_reply" v-if="reply.isReply">
                  <div class="reply_time">回复日期： {{reply.r_time}}</div>
                  <div class="rep_content">
                    <div class="reply_t">
                      <span class="el-icon-user-solid"></span>
                      {{reply.r_name}}
                    </div>
                    <div class="reply_c">
                      {{reply.r_content}}
                    </div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        
        <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            class="page_list"
            :total="allpages">
          </el-pagination>
        </div>
      </div>
      <div class="blogger_right">
        <topimg></topimg>
        <lable></lable>
      </div>
  </div>
</template>

<script>
import topimg from "../components/f_img.vue"
import lable from '@/components/Lable.vue'
export default {
    components:{
        topimg,
        lable
    },
  data(){
    return{
      // 分页
      currentPage4:1,     //当前页数
      allpages:3,         //全部留言数
      pagesize:10,        //当前也显示条数

      textarea: '',
      // 全部留言
      alldatalist:[],
      // 当前页内显示留言
      contrdata:[],
      contrdataAll:[]
    }
  },
  methods:{
    submitMessage(){
      var qs=require('qs');
      var instance_all = this.$http.create({ headers: {'content-type': 'application/x-www-form-urlencoded'} });
      // 本地是否有用户信息
      var user = JSON.parse(localStorage.getItem("user_blog"));
      if(!user){
        this.$message.warning("请登陆后留言！")
        this.$router.push({ path: '/login', })
      }else{
        if(this.textarea == ''){
          this.$message.error('留言不能为空！')
        }else{
        var data = {}
        data.textarea = this.textarea
        data.user = user
        data.creditime = this.getItem()
        // 请求数据库
        instance_all.post('http://blog.com/home/api/leavemessage',qs.stringify({
          top_id:0,
          user_id:user.id,
          user_name:user.name,
          user_img:user.user_img,
          content:this.textarea
        })).then((result) => {
        let yz = result.data.status
        if(yz == 4001){
          this.$message.error('错误，请刷新重试！')
        }else if(yz == 200){
          // 添加数据到页面
           this.$message.success('留言成功！')
           this.get_contribute()
        }else{
           this.$message.error('错误，请刷新重试！')
        }
      }).catch(() => {
        console.log(3)
         this.$message.error('错误，请刷新重试！')
      })
      }
      }
    },
    getItem(){
      // 获取当前时间
      var date=new Date();
      // 年月日
      var year=date.getFullYear();
      var month=date.getMonth();
      var day=date.getDate();
      // 时分秒
      var hour=date.getHours();
      var minute=date.getMinutes();
      var second=date.getSeconds();
      //这样写显示时间在1~9会挤占空间；所以要在1~9的数字前补零;
      if (month<10) {month='0'+(month+1);}
      if (hour<10) {hour='0'+hour;}
      if (minute<10) {minute='0'+minute;}
      if (second<10) {second='0'+second;}

      var time=year+'-'+month+'-'+day+'   '+hour+':'+minute+':'+second
      return time
    },
    // 分页
    handleSizeChange(val){
      this.pagesize = val
      this.contrdata = this.contrdataAll.slice(0,val)
    },
    handleCurrentChange(val){
      // console.log(this.currentPage4)
      this.currentPage4 = val //this.currentPage当前页，val要跳转的页面，this.pagesize每页显示的条数
      let start = 0
      let end 
      if(val > this.currentPage){
        start = this.currentPage * this.pagesize;
        end = start + this.pagesize
      }else{
        end = (this.currentPage - 1)*this.pagesize
        start = end - this.pagesize;
      }
      this.currentPage = val;
      // this.pageRow
      this.contrdata = this.contrdataAll.slice(start,end)
    },
    get_contribute(){
      this.$http.get('http://blog.com/api/api/messageAll?id=0').then((result) => {
        this.allpages = result.data.data.length
        this.contrdataAll = result.data.data
        this.contrdata = this.contrdataAll.slice(0,this.pagesize)
      })
    }
  },
  created(){
    this.get_contribute()
  }
}
</script>

<style>
.butt_area{
  float: right;
  margin-top: 4px;
  margin-right: 12px;
}
.rep_input{
  padding: 8px;
  font-size: 16px;
  border-bottom: 2px solid #dad8d8;
  margin-bottom: 8px;
}
.reply_title{
  font-size: 16px;
  padding-bottom: 10px;
  color: #2890e6;
}
.textarea_{
  margin-left: 36px;
  height: 140px;
}
.reply_content{
  color: #757575;
  text-indent: 2em;
  line-height: 1.5em;
  min-height: 3em;
  max-height: 6em;
}
.reply_c{
  color: #757575;
  text-indent: 2em;
}
.reply_t{
  color: #757575;
}
.admin_reply{
  width: 94%;
  margin-left: 5%;
  margin-top: 8px;
}
.reply_time{
  border-bottom: 1px solid #b1acac;
  margin-bottom: 6px;
  font-size: 13px;
  color: #5c5c5c;
  padding-left: 6px;
  padding-bottom: 3px;
}
.rep_content{
  margin-left: 10px;
  font-size: 13px;
}

.blogger_::after{
    content: '';
    display: block;
    clear: both;
}
.blogger_lift{
    float: left;
    width: 68%;
    text-align: left;
}
.blogger_right{
    /* border: 1px solid #424242; */
    float: right;
    width: 31%;
    background-color: #f7f7f7;
    border-radius: 6px;
    padding-top: 8px;
}
.ly_title{
  font-size: 16px;
  color: #5c5c5c;
  padding: 20px 0 20px 8px;
  background-color: #f7f7f7;
  border-radius: 4px;
  margin: 10px 0 ;

}
.block{
  padding-left: 8px;
  margin-bottom: 60px;
}
.page_list{
  display: block;
  margin-top: 30px;
  padding-left: 60px;
}
</style>